@mixin vendor-property($property, $value) {
  @each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
    #{$vendor}#{$property}: #{$value};
  }
}

@mixin vendor-value($property, $value) {
  @each $vendor in ('-moz-', '-webkit-', '-o-', '-ms-', '') {
    #{$property}: #{$vendor}#{$value};
  }
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin vendor-keyframes($name) {
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
  @-o-keyframes #{$name} { @content; }
  @-ms-keyframes #{$name} { @content; }
  @keyframes #{$name} { @content; }
}


@mixin user-select($value) {
  -webkit-user-select: $value;  /* Chrome all / Safari all */
  -moz-user-select: $value;     /* Firefox all */
  -ms-user-select: $value;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: $value;
  user-select: $value;
}

//USAGE:
//@include vendor-keyframes('wrapper') {
//  0%        { opacity: 0; }
//  100%	{ opacity: 1; }
//}
//
// @include vendor-property('animation', 'wrapper 3s forwards');

@mixin gradient ($startColor: #eee, $endColor: white) {
  background-color: $startColor;
  background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
  background: -webkit-linear-gradient(top, $startColor, $endColor);
  background: -moz-linear-gradient(top, $startColor, $endColor);
  background: -ms-linear-gradient(top, $startColor, $endColor);
  background: -o-linear-gradient(top, $startColor, $endColor);
}
@mixin horizontal-gradient ($startColor: #eee, $endColor: white) {
  background-color: $startColor;
  background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
  background-image: -moz-linear-gradient(left, $startColor, $endColor);
  background-image: -ms-linear-gradient(left, $startColor, $endColor);
  background-image: -o-linear-gradient(left, $startColor, $endColor);
}

@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
}


@mixin scale ($factor) {
  -webkit-transform: scale($factor);
  -moz-transform: 	 scale($factor);
  -ms-transform: 		 scale($factor);
  -o-transform: 		 scale($factor);
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}
@mixin align-items($val) {
  -webkit-flex-align: $val;
  -ms-flex-align: $val;
  -webkit-align-items: $val;
  align-items: $val;
}
@mixin align-self($val) {
  -webkit-align-self: $val;
  align-self: $val;
}
@mixin justify-content($val) {
  -webkit-justify-content: $val;
  justify-content: $val;
}
@mixin align-content($val) {
  -webkit-align-content: $val;
  align-content: $val;
}

@mixin flex-direction($val) {
  -webkit-flex-direction: $val;
  flex-direction: $val;
}

@mixin flex-center-all(){
  @include flexbox;
  @include align-items(center);
  @include justify-content(center);
  @include align-content(center);
}

@mixin btn($background: #333, $color: white){
  background: $background;
  border-color: darken($background, 3%);
  color: $color;

  &:hover,
  &:focus,
  &:focus:active,
  &:active{
    background: darken($background, 7%);
    border-color: darken($background, 12%);
    color: white;
    outline: none;
  }

  &.btn-outline{
    background: transparent;
    border: 1px solid $background;
    color: $background;
    border-radius: 2em;
  }
}


@mixin icomoon{
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}



@mixin spin{
  @include vendor-property('animation', 'spin 1s infinite linear');
  position: absolute;
  left: 0;
  top: 0;
}

@include vendor-keyframes('spin') {
  0%        { @include vendor-property('transform', 'rotate(0deg)');}
  100%	{@include vendor-property('transform', 'rotate(359deg)'); }
}
